<template>
	<view class="page" style="background-color: #FFF;">
		<cu-custom bgColor="bg-white"  :isBack="true"><block slot="content">评价</block></cu-custom>
		<scroll-view class="bg-white " style="min-height: 700rpx; padding-bottom: 100rpx;">
			<view v-for="(item,index) in commentFrom.comments" :key="index" >
				<view class="padding-sm">
					<view class="padding-sm flex">
						<view class="bg-img radius goodsImg" :style="'background-image:url('+commentSku[index].goods_image+');'"></view>
						<!-- <view class="bg-img radius goodsImg" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big143004.jpg);"></view> -->
						<view class="margin-left-sm text-fw500 text-sm flex-1" style="">{{commentSku[index].name}}</view>
					</view>
					<view class="flex justify-between align-center margin-top-sm" style="width: 100%;">
						<view class="text-df text-333 text-fw600">评价</view>
						<view class="flex align-center">
							<!-- <view class="flex align-center margin-left-sm" v-for="(key,kIndex) in rateList" :key="kIndex" @tap="handleRate(key.type,kIndex,index)">
								<image class="rateListIcon" :src="key.icon" mode=""></image>
								<text class="text-sm" :class="rateIndex==kIndex?'text-bold text-theme':'text-333'">{{key.title}}</text>
							</view> -->
							<view class="flex align-center margin-left-sm">
								<text class="text-sm" :class="item.grade==='good'?'text-bold text-theme':'text-333'">好评</text>
							</view>
							<view class="flex align-center margin-left-sm">
								<text class="text-sm" :class="item.grade==='neutral'?'text-bold text-theme':'text-333'">中评</text>
							</view>
							<view class="flex align-center margin-left-sm">
								<text class="text-sm" :class="item.grade==='bad'?'text-bold text-theme':'text-333'">差评</text>
							</view>
						</view>
					</view>
				</view>
				<view class="bg-lightGrey padding-sm radius20 overHidden margin-sm">
					<view class="cu-form-group bg-lightGrey">
						<textarea maxlength="-1" v-model="item.content" @input="textareaInput(item.content,index)" :data-index="index" :maxlength="100" placeholder="这款酒的品质味道如何，快来写下你的评论吧"></textarea>
					</view>
					<view class="cu-form-group bg-lightGrey">
						<view class="grid col-4 grid-square flex-sub">
							<view class="solids bg-white" @tap="ChooseImage(index)" v-if="item.imagesList.length<4">
								<text class='cuIcon-cameraadd'></text>
							</view>
							<view class="bg-img" v-model="item.imagesList" v-for="(cImg,cIndex) in item.imagesList" :key="index" @tap="ViewImage" :data-url="item.imagesList[cIndex]">
							 <image :src="item.imagesList[cIndex]" mode="aspectFill"></image>
								<view class="cu-tag bg-red" @tap.stop="DelImg(index,cIndex)">
									<text class='cuIcon-close'></text>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="padding-sm margin-top-sm">
					<view>
						<text class="text-lg text-333 text-fw600">品价比评分</text>
					</view>
					<view class="margin-top-sm">
						<text class="text-df text-333">用您的评分  酿一瓶好酒</text>
					</view>
					<view>
						<view class="flex align-center jusity-between margin-top-sm">
							<view class="flex" style="width: 100%;">
								<text class="rateTtile">品质</text>
								<sx-rate :max="10" :value.sync="item.quality_score"/>
							</view>
							<view class="flex justify-end text-999 text-df" style="width: 80rpx;">
								{{item.quality_score}} 分
							</view>
						</view>
						<view class="flex align-center jusity-between margin-top-sm">
							<view class="flex" style="width: 100%;">
								<text class="rateTtile">口感{{index}}</text>
								<sx-rate :max="10" :value.sync="item.texture_score"/>
							</view>
							<view class="flex justify-end text-999 text-df" style="width: 80rpx;">
								{{item.texture_score}}  分
							</view>
						</view>
						<view class="flex align-center jusity-between margin-top-sm">
							<view class="flex" style="width: 100%;">
								<text class="rateTtile">价格</text>
								<sx-rate :max="10" :value.sync="item.price_score"/>
							</view>
							<view class="flex justify-end text-999 text-df" style="width: 80rpx;">
								{{item.price_score}}  分
							</view>
						</view>
						<view class="flex align-center jusity-between margin-top-sm">
							<view class="flex" style="width: 100%;">
								<text class="rateTtile">包装</text>
								<sx-rate :max="10" :value.sync="item.packing_score"/>
							</view>
							<view class="flex justify-end text-999 text-df" style="width: 80rpx;">
								{{item.packing_score}}  分
							</view>
						</view>
						<view class="flex align-center jusity-between margin-top-sm">
							<view class="flex" style="width: 100%;">
								<text class="rateTtile">品牌</text>
								<sx-rate :max="10" :value.sync="item.brand_score"/>
							</view>
							<view class="flex justify-end text-999 text-df" style="width: 80rpx;">
								{{item.brand_score}}  分
							</view>
						</view>
						<view class="flex align-center jusity-between margin-top-sm">
							<view class="flex" style="width: 100%;">
								<text class="rateTtile">品价比</text>
								<sx-rate :max="10" :value.sync="item.product_price_ratio_score"/>
							</view>
							<view class="flex justify-end text-999 text-df" style="width: 80rpx;">
								{{item.product_price_ratio_score}}  分
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="padding-sm margin-top-sm">
				<view class="flex align-center jusity-between margin-top-sm">
					<view class="flex" style="width: 100%;">
						<text class="rateTtile">发货速度</text>
						<sx-rate :value.sync="commentFrom.delivery_score"/>
					</view>
					<view class="flex justify-end text-999 text-df" style="width: 80rpx;">
						{{commentFrom.delivery_score}}  分
					</view>
				</view>
				<view class="flex align-center jusity-between margin-top-sm">
					<view class="flex" style="width: 100%;">
						<text class="rateTtile">描述相符度</text>
						<sx-rate :value.sync="commentFrom.description_score"/>
					</view>
					<view class="flex justify-end text-999 text-df" style="width: 80rpx;">
						{{commentFrom.description_score}}  分
					</view>
				</view>
				<view class="flex align-center jusity-between margin-top-sm">
					<view class="flex" style="width: 100%;">
						<text class="rateTtile">服务评分</text>
						<sx-rate :value.sync="commentFrom.service_score"/>
					</view>
					<view class="flex justify-end text-999 text-df" style="width: 80rpx;">
						{{commentFrom.service_score}}  分
					</view>
				</view>
			</view>
		</scroll-view>
		<view class="flex" style="position: fixed;bottom: 0;width:100%" @tap="confirmComment">
			<view class="padding-sm bg-theme lg flex justify-center" style="width: 100%;">
				<text class="text-lg">发布</text>
			</view>
		</view>
	</view>
</template>

<script>
import * as Order_API from '@/api/order.js' 
	import SxRate from '@/components/sx-rate'
	export default {
	    components: {SxRate},
		data() {
			return {
				commentSku:uni.getStorageSync('orderCommentSuk') || {},
				rateSync: 2,
				color: {
				  default: '#FFF',
				  active: '#FFB700'
				},
				fontSize: 'inherit',
				margin: '10px',
				commentFrom:{
					// comments: [
					//   //   {
					// 		// brand_score: 10,
					// 		// comment_state: 1,
					// 		// content: "",
					// 		// grade: "good",
					// 		// images: [],
					// 		// packing_score: 10,
					// 		// price_score: 10,
					// 		// product_price_ratio_score: 10,
					// 		// quality_score: 10,
					// 		// sku_id: null,
					// 		// texture_score: 10
					//   //   }
					//   ],
					//   delivery_score: 5,
					//   description_score: 5,
					//   order_sn: "",
					//   service_score: 5
				},
				sn:'',
				changeLog: [],
				imgList: [],
				modalName: null,
				textareaValue: '',
				rateIndex:0,
				rateList:[
					{title:'好评',icon:'../../static/images/icon_rate_good.png',type:'good'},
					{title:'中评',icon:'../../static/images/icon_rate_neutral.png',type:'neutral'},
					{title:'差评',icon:'../../static/images/icon_rate_bad.png',type:'bad'}
				],
				rate:''
			};
		},
		watch:{
			commentFrom(newVal){
				console.log('commentFrom====',newVal)
				this.commentFrom = newVal
			}
		},
		onLoad(e) {
			if(e.sn){
				this.sn = e.sn
				// this.commentFrom.comments[0].sku_id = e.sku_id
				this.initData()
			}
		},
		onBackPress() {
			uni.removeStorageSync('orderCommentSuk')
		},
		methods:{
			initData(){
				console.log('11111111')
				let cSku = uni.getStorageSync('orderCommentSuk')
				// let initComment = {
				// 	brand_score: 10,
				// 	comment_state: 1,
				// 	content: "",
				// 	grade: "good",
				// 	images:'',
				// 	imagesList:[],
				// 	packing_score: 10,
				// 	price_score: 10,
				// 	product_price_ratio_score: 10,
				// 	quality_score: 10,
				// 	sku_id: null,
				// 	texture_score: 10
				// }
				// let initCommentList = []
				// let commentList = this.commentFrom.comments
				// if(cSku.length>0){
				// 	cSku.map(async item =>{
				// 		let data = initComment
						
						
				// 		data.sku_id = await item.sku_id
				// 		console.log('1212',data.sku_id,item.sku_id)
				// 		// this.commentFrom.comments =await [...commentList,data]
				// 		await initCommentList.push(data)
				// 	})
				// 	setTimeout(()=>{
				// 		this.commentFrom.comments = initCommentList
				// 		console.log('0000',initCommentList,this.commentFrom.comments )
				// 	},300)
				// }
				this.commentFrom = {
				    order_sn: this.sn,
				    delivery_score: 5,
				    description_score: 5,
				    service_score: 5,
				    comments: cSku.map((item, index) => {
				      return {
				        sku_id: item.sku_id,
				        content: '',
				       	brand_score: 10,
				       	comment_state: 1,
				       	grade: "good",
				       	images:'',
				       	imagesList:[],
				       	packing_score: 10,
				       	price_score: 10,
				       	product_price_ratio_score: 10,
				       	quality_score: 10,
				       	texture_score: 10
				      }
				    })      
				}
			},
			handleRate(type,kIndex,index){
				console.log('grage',type,kIndex,index)
				// this.rateIndex = kIndex
				// this.rate = type
				let list = this.commentFrom.comments
				// console.log(list)
				list[index].grade = type
				setTimeout(() =>{
					console.log('after',list)
				},1000)
			},
			ChooseImage(index) {
				// console.log(index,this.commentFrom.comments[index].imagesList)
				let imagesList = this.commentFrom.comments[index].imagesList
				uni.chooseImage({
					count: 4, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {
						if (imagesList.length != 0) {
							if(imagesList.length+res.tempFilePaths.length<=4){
								this.commentFrom.comments[index].imagesList = imagesList.concat(res.tempFilePaths)
							}else{
								uni.showToast({
									icon:'none',
									title:'最多上传4张照片',
									duration:2000
								})
							}
						} else {
							this.commentFrom.comments[index].imagesList = res.tempFilePaths
						}
						let images = ''
						if(this.commentFrom.comments[index].imagesList.length<2){
							images = imagesList[0]
							this.commentFrom.comments[index].images = images
						}else{
							this.commentFrom.comments[index].images = imagesList.join(',')
						}
						// this.commentFrom.comments[index].images = images
					}
				});
			},
			ViewImage(e) {
				uni.previewImage({
					urls: this.imgList,
					current: e.currentTarget.dataset.url
				});
			},
			DelImg(index,cIndex) {
				uni.showModal({
					title: '删除提示',
					content: '确定要删除这张照片吗？',
					cancelText: '取消',
					confirmText: '确定',
					success: res => {
						if (res.confirm) {
							this.commentFrom.comments[index].imagesList.splice(cIndex, 1)
						}
					}
				})
			},
			textareaInput(content,index) {
				this.commentFrom.comments[index].content = content
			},
			onChange(e){
			  this.changeLog.push(e)
			},
			confirmComment(){
				this.commentFrom.comments.map(item =>{
					item.brand_score = parseInt(item.brand_score)
					item.packing_score = parseInt(item.packing_score)
					item.price_score = parseInt(item.price_score)
					item.product_price_ratio_score = parseInt(item.product_price_ratio_score)
					item.quality_score = parseInt(item.quality_score)
					item.texture_score = parseInt(item.texture_score)
					item.comment_state = parseInt(item.comment_state)
				})
				this.commentFrom.delivery_score = parseInt(this.commentFrom.delivery_score)
				this.commentFrom.description_score = parseInt(this.commentFrom.description_score)
				this.commentFrom.service_score = parseInt(this.commentFrom.service_score)
				console.log('submit===',this.commentFrom)
				// setTimeout(()=>{
				// 	Order_API.orderComment(this.commentFrom).then(res =>{
				// 		uni.showLoading({
				// 			title:'评论已提交'
				// 		})
				// 		uni.navigateBack({
				// 			delta:1
				// 		})
				// 	})
				// },500)
			}
		}
	}
</script>

<style lang="scss">
.goodsImg{
	width: 120upx;
	height: 120upx;	
}
.rateListIcon{
	width: 40upx;
	height: 40upx;	
	margin-right: 10rpx;
}
.container{
    font-size: 40upx;
    line-height: 1.4;
  }
  .content{
    background: #f1f1f1;
    margin-top: 16px;
  }
  .content:last-child{
    margin-bottom: 60px;
  }
  .flex-box{
    display: flex;
    align-items: center;
  }
  .input{
    border: 1px solid #ddd;
  }
  .note{
    color: #bbb;
    font-size: 14px;
  }

  /*rate的容器不受scope限制*/
  .my-rate-box{
    justify-content: space-around;
  }

  /*rate的星星在h5中受scope限制*/
  .my-rate{
    animation: scale .2s linear infinite;
  }
  /deep/ .my-rate{
    animation: rotate 2s linear infinite;
  }
.rateTtile{
	width: 140rpx;
	font-size: 26rpx;
	color: #333;
	font-weight:500;
}
/deep/.cu-form-group+.cu-form-group {
	border-top: 0;
}
</style>
